.menu-icon1 {
  content: url(~@/assets/img/icon/menu-icon1-dark.svg);
}

.menu-icon2 {
  content: url(~@/assets/img/icon/menu-icon2-dark.svg);
}

.menu-icon3 {
  content: url(~@/assets/img/icon/menu-icon3-dark.svg);
}

.menu-icon4 {
  content: url(~@/assets/img/icon/menu-icon4-dark.svg);
}

.menu-icon5 {
  content: url(~@/assets/img/icon/menu-icon5-dark.svg);
}

.menu-icon6 {
  content: url(~@/assets/img/icon/menu-icon6-dark.svg);
}

.menu-icon7 {
  content: url(~@/assets/img/icon/menu-icon7-dark.svg);
}

.menu-icon8 {
  content: url(~@/assets/img/icon/menu-icon8-dark.svg);
}

.menu-icon9 {
  content: url(~@/assets/img/icon/menu-icon9.svg);
}

.menu-icon10 {
  content: url(~@/assets/img/icon/menu-icon10.svg);
}

.menu-icon11 {
  content: url(~@/assets/img/icon/menu-icon11-dark.svg);
}

.menu-icon11-1 {
  content: url(~@/assets/img/icon/menu-icon11-1-dark.svg);
}

.menu-icon11-2 {
  content: url(~@/assets/img/icon/menu-icon11-2-dark.svg);
}

.menu-icon11-3 {
  content: url(~@/assets/img/icon/menu-icon11-3-dark.svg);
}

.menu-icon11-4 {
  content: url(~@/assets/img/icon/menu-icon11-4-dark.svg);
}

.menu-icon11-5 {
  content: url(~@/assets/img/icon/menu-icon11-5-dark.svg);
}

.menu-icon12 {
  content: url(~@/assets/img/icon/menu-icon12-dark.svg);
}

.menu-icon13 {
  content: url(~@/assets/img/icon/menu-icon13-dark.svg);
}

.menu-icon14 {
  content: url(~@/assets/img/icon/menu-icon14-dark.svg);
}

.menu-icon15 {
  content: url(~@/assets/img/icon/menu-icon15-dark.svg);
}

.menu-icon16 {
  content: url(~@/assets/img/icon/menu-icon16-dark.svg);
}

.menu-icon17 {
  content: url(~@/assets/img/icon/menu-icon17-dark.svg);
}

.menu-icon18 {
  content: url(~@/assets/img/icon/menu-icon18-dark.svg);
}


.is-active {
  .menu-icon1 {
    content: url(~@/assets/img/icon/menu-icon1-dark-active.svg);
  }

  .menu-icon2 {
    content: url(~@/assets/img/icon/menu-icon2-dark-active.svg);
  }

  .menu-icon3 {
    content: url(~@/assets/img/icon/menu-icon3-dark-active.svg);
  }

  .menu-icon4 {
    content: url(~@/assets/img/icon/menu-icon4-dark-active.svg);
  }

  .menu-icon5 {
    content: url(~@/assets/img/icon/menu-icon5-dark-active.svg);
  }

  .menu-icon6 {
    content: url(~@/assets/img/icon/menu-icon6-dark-active.svg);
  }

  .menu-icon8 {
    content: url(~@/assets/img/icon/menu-icon8-dark-active.svg);
  }

  .menu-icon13 {
    content: url(~@/assets/img/icon/menu-icon13-dark-active.svg);
  }

  .menu-icon16 {
    content: url(~@/assets/img/icon/menu-icon16-dark-active.svg);
  }

  .menu-icon17 {
    content: url(~@/assets/img/icon/menu-icon17-dark-active.svg);
  }

  .menu-icon18 {
    content: url(~@/assets/img/icon/menu-icon18-dark-active.svg);
  }
}

.layout {
  background: rgba(#eee, .3);
}

.el-tabs__header {
  margin: 0;
}

.nav-alike {
  overflow: hidden;
  margin-top: 16px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: transparent;
  // background-color: #F5F5F5;
  // border-bottom: 1px solid #E4E7ED;

  .nav-alike-item {
    display: inline-block;
    min-width: 80px;
    position: relative;
    padding: 5px 10px;
    font-size: 1.125rem;
  }


  .is-active::before {
    content: "";
    width: 100%;
    height: 5px;
    background-color: #0077FF;
    display: block;
    position: absolute;
    z-index: 1;
  }

  // li {
  // 	// border-bottom: 1px solid #FFF;
  // 	padding: 0 16px;
  // 	transition: all .3s;
  // 	float: left;
  // 	// line-height: 48px;
  // 	cursor: pointer;
  // 	height: 48px;
  // 	line-height: 48px;
  // 	background: #E4E7ED;
  // 	border-radius: 4px 4px 0px 0px;
  // 	margin-right: 8px;
  // 	color: #606266;
  // 	font-size: 16px;
  // }

  .active {
    // color: #0077FF;
    // border-color: #0077FF;
    color: #0077FF;
    background: #FFF;
  }
}

.router-link-active {
  color: #333;
}

@media (max-width: 1200px) {
  .alike-lis li {
    min-width: calc(33.4% - 20px);
  }
}

@media (max-width: 767px) {
  .alike-lis li {
    min-width: calc(50% - 20px);
  }
}

@media screen and (max-width: 575px) {
  .alike-lis li {
    min-width: 100%;
  }
}

@media screen and (max-width: 433px) {
  .alike-lis li {
    min-width: 100%;
  }
}

.select-ver {
  margin-bottom: 20px;
}

.alike-lis {
  display: flex;
  flex-wrap: wrap;

  li {
    flex: 0 0 calc(25% - .625rem);
    box-sizing: border-box;
    padding: 0 8px 16px;
    // float: left;
    margin-bottom: 1.25rem;
    margin-right: .625rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    .alike-lis-box {
      background: #FFF;
      // padding-bottom: 10px;
      border-radius: 10px;
      overflow: hidden;
      max-height: 313px;

      &:hover {
        i {
          display: block;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .alike-lis-pic {
      width: 100%;
      height: 190px;
      // aspect-ratio: 4 / 3;
      cursor: pointer;
    }

    .alike-lis-word {
      position: relative;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      padding: 10px 14px;
      box-sizing: border-box;
      // border: 1px solid #f00;

      &>* {
        line-height: 2.5em;
      }
    }

    .alike-lis-title {
      position: relative;
      font-weight: bold;
      line-height: 24px;
      display: flex;
      font-size: .875rem !important;
      // padding: 16px 0 0 14px;
      cursor: pointer;

      .name {
        max-width: 65%;
        margin-right: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .status-tag {
        font-size: 12px;
        line-height: 1em;
        padding: 5px;
        white-space: nowrap !important;

        &.danger {
          border: 1px solid #FF8D8D;
          background: rgba(#E31E1E, .26);
          color: #FF8D8D;
        }

        &.warning {
          border: 1px solid #E3D21E;
          background: rgba(#E3D21E, .31);
          color: #E3D21E;
        }

        &.success {
          border: 1px solid #B0E31E;
          background: rgba(#B0E31E, .31);
          color: #B0E31E;
        }
      }

      i {
        position: absolute;
        display: flex;
        top: 0;
        // right: 14px;
        right: 0;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        cursor: pointer;
        display: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #202337;
      }
    }


    .alike-lis-type {
      // padding: 4px 14px 0;
    }

    .alike-lis-hint {
      // color: #8F9299;
      // height: 36px;
      // padding: 4px 14px 0;
      font-size: 12px;
      height: 2em;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .alike-lis-user {
      // padding: 5px 10px 0;
      font-size: 12px;
      // color: #A4ADCD;

      img {
        // width: 18px;
        width: 14px;
        float: left;
      }

      .user-name {
        // line-height: 18px;
        font-size: 12px;
      }

      .date {
        // line-height: 18px;
        float: right;
      }
    }
  }
}


// .search-box {
//   overflow: hidden;
//   // width: 400px;
//   // position: absolute;
//   // right: 16px;
//   // top: 58px;
//   float: right;
//   // margin-bottom: 20px;

//   .search {
//     float: left;
//     width: 280px;
//   }

//   .add {
//     float: left;
//     width: 110px;
//     box-sizing: border-box;
//     padding-left: 18px;
//     height: 36px;
//     background: #7872F6;
//     border-radius: 4px;
//     margin-left: 10px;
//     line-height: 36px;
//     color: #FFF;

//     &::before {
//       margin-right: 4px;
//     }

//     &:hover {
//       opacity: 0.8;
//     }
//   }
// }

.alike-lis-header {
  display: flex;
  justify-content: space-between;
  margin: 0 0 9px;

  .lis-header-left {
    display: flex;
    align-items: center;
  }

  .add-btn {
    border: 1px solid #64B121;
    background: rgba(#64B121, .6);
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    min-width: 56px;
    padding: 0 4px;
    line-height: 28px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
  }

  .search-box {
    .el-input__prefix {
      top: -6px;
      left: 0;
      font-size: 20px;
      color: #47547C;
    }

    .el-input__inner {
      height: 28px;
      line-height: 28px;
      border: 0 !important;
      background: transparent !important;
      border-bottom: 1px solid #47547C !important;
      border-radius: 0;
    }
  }


}

.btns-switch {
  width: 100px;
  display: flex;
  border-radius: 4px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }

  div {
    width: 40px;
    height: 28px;
    cursor: pointer;
  }

  .btn {
    width: 40px;
    height: 20px;
    line-height: 20px;
    padding: 5px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: #808080;
    cursor: pointer;
  }

  .is-active {
    background: rgba(#808080, .5) !important;
  }
}


.alike-lis-handle {
  padding-left: 26px;
  line-height: 36px;
  display: block;
  color: #4285F4;

  &:hover {
    background: #F5F7FA;
  }
}

.radio_box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

  :deep(.el-radio-group) {
    .el-radio-button__inner {
      font-size: 15px;
      width: 120px !important;
      height: 40px;
      color: rgba(132, 146, 194, 1) !important;
      background: rgba(17, 21, 24, 1);
      border: 1px solid rgba(132, 146, 194, 1) !important;
    }

    /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      background: rgba(132, 146, 194, 1) !important;
      color: rgba(255, 255, 255, 1) !important;
      border: 1px solid rgba(132, 146, 194, 1) !important;
    }
  }
}

:deep(.el-radio-group) {
  .el-radio-button__inner {
    font-size: 15px;
    width: 120px !important;
    height: 40px;
    color: rgba(132, 146, 194, 1) !important;
    background: rgba(17, 21, 24, 1);
    border: 1px solid rgba(132, 146, 194, 1) !important;
  }

  /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background: rgba(132, 146, 194, 1) !important;
    color: rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(132, 146, 194, 1) !important;
  }
}

.pagination-box {
  overflow: hidden;
  padding: 18px 10px 20px 0;

  .pagination {
    float: right;
    display: flex;
  }

  .el-pager {

    li {
      border: 1px solid rgba(#eee, .2) !important;
    }

    .active {
      background: #177DDC !important;
      border: 1px solid #177DDC;
    }
  }

  .btn-prev,
  .btn-next {
    border: 1px solid #177DDC;

    i {
      color: #177DDC;
    }
  }

  .el-pagination__jump {
    display: flex !important;
    align-items: center !important;
  }
}

// @media screen and (min-width:2000px) {
// 	.alike-lis {
// 		li {
// 			width: 20%;
// 		}
// 	}
// }

// @media screen and (min-width:2300px) {
// 	.alike-lis {
// 		li {
// 			width: 16.66%;
// 		}
// 	}
// }

// @media screen and (min-width:2600px) {
// 	.alike-lis {
// 		li {
// 			width: 14.28%;
// 		}
// 	}
// }

// @media screen and (min-width:2900px) {
// 	.alike-lis {
// 		li {
// 			width: 12.25%;
// 		}
// 	}
// }

// @media screen and (min-width:3100px) {
// 	.alike-lis {
// 		li {
// 			width: 10%;
// 		}
// 	}
// }

// @media screen and (min-width:3400px) {
// 	.alike-lis {
// 		li {
// 			width: 9.09%;
// 		}
// 	}
// }

// @media screen and (min-width:3700px) {
// 	.alike-lis {
// 		li {
// 			width: 8.33%;
// 		}
// 	}
// }

// @media screen and (min-width:4000px) {
// 	.alike-lis {
// 		li {
// 			width: 7.68%;
// 		}
// 	}
// }

// @media screen and (min-width:4300px) {
// 	.alike-lis {
// 		li {
// 			width: 7.14%;
// 		}
// 	}
// }

// @media screen and (min-width:4600px) {
// 	.alike-lis {
// 		li {
// 			width: 6.66%;
// 		}
// 	}
// }

// @media screen and (min-width:4900px) {
// 	.alike-lis {
// 		li {
// 			width: 6.25%;
// 		}
// 	}
// }

.code-desc-header {
  .title {
    min-width: 130px;
  }

  .code-status {
    min-width: 22.5rem;
  }
}

.my-steps {
  height: 64px;
  box-sizing: border-box;

  .el-step__head {
    margin-top: 10px;
  }
}

.myself-table {
  margin-top: 20px;
}

.myself-form {
  max-width: 864px;
}

#app .myself-steps {
  padding-left: 100px;
  max-width: 760px;
  background: rgba(0, 0, 0, 0);
  height: 40px;

  .el-step.is-simple {
    overflow: hidden;
  }

  .el-step__head {
    margin-top: 6px;
  }

  .el-step__arrow {
    // padding: 0 20px;
    margin: 0 20px;
    position: relative;

    &::before {
      display: none;
    }

    &::after {
      transform: rotate(0deg);
      width: 100%;
      height: 1px;
      background: #ccc;
      box-sizing: border-box;
      // margin: 0 20px;
    }
  }

  .el-step__title.is-success {
    color: #0077FF;
  }

  .el-step__head.is-success {
    color: #0077FF;
    border-color: #0077FF;

    .is-status {
      color: #0077FF;
    }
  }

}


.table-layout {
  background: #FFF;
  // padding: 6px 16px;
}

.row-btns-item {
  margin-right: 10px;
  display: inline-block;
}

.row-btns-item:last-child {
  margin-right: 0;
}

.has-ver-table-layout {
  padding-right: 16px;
}

.full-extent-select {
  width: 100%;
}

.page-title {
  line-height: 24px;
  color: #3D3D3D;
  font-size: 18px;
  font-weight: bold;
  padding: 4px 2px;
}

.tabs-box {
  // margin: 1.25rem 0 .625rem;
}

// .alike-search-header {
// 	justify-content: space-between;
// 	width: 100%;
// 	overflow: hidden;


// }



.has-vers-lis {
  margin-top: 4px;
  width: 100%;

  li {
    margin-bottom: 6px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: #FFF;
  }

  .lis-header {
    display: flex;
    width: 100%;
    height: 48px;
    background: #F2F6FC;
    justify-content: space-between;

    .lis-header-name {
      padding-left: 24px;
      line-height: 48px;

      cursor: pointer;

      strong {
        padding-right: 20px;
        width: 550px;
        box-sizing: border-box;
        float: left;
        line-height: 48px;
        font-size: 16px;
      }

      span {
        float: left;
        line-height: 48px;
        color: #606266;

        b {
          margin-right: 20px;
          font-weight: normal;
        }
      }
    }
  }

  .ver-table {
    padding: 0 20px 10px;
    width: 100%;
    background-color: #FFF;
    box-sizing: border-box;
  }

  .header-style {
    .cell {
      color: #8F9299;
      font-weight: normal;
    }
  }
}

.handle-btn-hollow {
  float: left;
  height: 24px;
  background: rgba(120, 114, 246, 0.1);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #7872F6;
  margin: 12px 8px 0 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 24px;

  &:hover {
    opacity: .8;
  }
}

.detail-layout {
  background: #FFF;
  padding: 0 20px 20px 0;
  overflow: hidden;
}

.add-alike-title {
  margin-left: 24px;
  line-height: 24px;
  font-size: 16px;
  border-bottom: 1px solid #DCDFE6;
  margin-bottom: 20px;
  padding: 6px 0;
}

.alick-layout-status {
  margin-left: 4px;
  // font-weight: normal;
}

.alick-layout-status.queuing {
  color: #E6A23C;
}

.alick-layout-status.deploying {
  color: #E6A23C;
}

.alick-layout-status.running {
  color: #67C23A;
}

// .alick-layout-status.terminating {
// 	color: ;
// }
.alick-layout-status.failed {
  color: #F56C6C;
}

.alick-list-status {
  padding: 0 8px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  display: inline-block;
  // border: 1px solid #409EFF;
  // border-radius: 4px;
  color: #409EFF;
  // background: rgba(64, 158, 255, .1);
  display: flex;
  align-items: center;
  // justify-content: center;

  * {
    margin-right: 5px;
  }
}

.alick-list-status.queuing,
.alick-list-status.deploying,
.alick-list-status.terminating {
  color: rgba(230, 162, 60, 1);
  // border-color: rgba(230, 162, 60, 1);
  // background-color: rgba(230, 162, 60, .1);
}

.alick-list-status.running {
  color: rgba(35, 187, 93, 1);
  // border-color: rgba(103, 194, 58, 1);
  // background-color: rgba(103, 194, 58, .1);
}

.alick-list-status.failed {
  color: rgba(245, 108, 108, 1);
  // border-color: rgba(245, 108, 108, 1);
  // background-color: rgba(245, 108, 108, .1);
}

.layout-top {
  display: flex;
  justify-content: space-between;

  .rollback {
    position: absolute;
    top: 11px;
    left: 20px;
    color: #8492C2;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;

    img {
      width: 14px;
      mask-repeat: no-repeat;
      mask-size: 14px;
      mask-position: center;
      mask-image: url(~@/assets/img/prev.png);
      background: #8492C2;
      color: #8492C2;
    }
  }

  .code-description {
    flex-grow: 4;
  }

  .code-status {
    flex-grow: 20;
    min-width: 300px;
  }


  .btns-container {
    flex-grow: 1;
    min-width: 18.125rem;
  }
}

.btns-container {
  // margin: 10px 0;
}

.alick-handle-btns {
  // position: absolute;
  // right: 18px;
  // bottom: 12px;
  float: right;

  .handle-btn {
    // min-width: 55px;
    // height: 28px;
    // line-height: 28px;
    // font-size: 12px;
    // // background: rgba(120,114,246,0.1);
    // // background: #7872F6;
    // border-radius: 4px;
    // // border: 1px solid #7872F6;
    // margin-left: 8px;
    // float: left;
    // padding: 0 12px;
    // text-align: center;
    // color: #FFF;
    margin: 0 5px 10px;

  }

  &:first-child .handle-btn {
    margin-left: 0;
  }

}

// .el-dropdown-link {
// 	border: 1px solid rgba(#808080, .5);
// 	padding: 5px 10px;
// 	border-radius: 10px;
// 	position: relative;
// 	padding-left: 28px;
// 	background: #eee;
// 	top: 3px;

// 	span::before {
// 		content: "";
// 		width: 16px;
// 		height: 16px;
// 		background: url(~@/assets/img/branch.png) no-repeat center;
// 		background-size: cover;
// 		margin-top: 3px;
// 		position: absolute;
// 		left: 6px;
// 		top: 4px;
// 	}
// }

.version-list {
  padding: .625rem 0;

  .version-item {
    line-height: 2em;
    padding: .625rem 1.25rem;
    border-bottom: 1px solid #eee;
    cursor: pointer;

    &:hover {
      background: #eee;
    }

    p {
      display: flex;
      justify-content: space-between;
      padding: .3125rem 0;
    }

    .title {
      font-size: 20px;
    }

    .commit {
      color: #808080;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      white-space: normal;
      width: 90%;
    }
  }
}

.alick-popover-handle-btns {
  // padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  // align-items: center;

  .handle-btn {
    margin-bottom: 10px;
    min-width: 55px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    // background: rgba(120,114,246,0.1);
    background: #7872F6;
    border-radius: 4px;
    // border: 1px solid #7872F6;
    // margin-left: 8px;
    display: block;
    padding: 0 12px;
    text-align: center;
    color: #FFF;
    // margin: 0 0 10px 0;
  }

  .handle-btn:nth-child(2) {
    margin-left: 0;
  }
}

.alick-add-form {
  max-width: 800px;
}

.right-btn-box {
  display: block;
  width: 100%;
  overflow: hidden;
  padding-bottom: 10px;

  .outin-handle {
    float: right;
  }
}


.port-lis {
  display: flex;
  width: calc(100% - 24px);
  // padding-top: 10px;

  .port-el-input {
    flex: 1;
    margin-left: 10px;
    box-sizing: border-box;
  }

  .port-lis-radio {
    padding-top: 4px;
    width: 160px;
  }
}

.alike-lis-both {
  width: 100%;

  ul {
    width: calc(100% + 20px);
    margin: 0 -10px;
  }

  .lis-both-item {
    width: calc(50% - 20px);
    margin: 20px 10px 0;
    background: #FFF;
    float: left;
    height: 150px;
    display: flex;
    border-radius: 4px;
    cursor: pointer;

    .dimg {
      width: 200px;
      height: 150px;
    }

    .word-box {
      padding: 0 20px;
      overflow: hidden;
      flex: 1;
      position: relative;
    }

    .title {
      padding-top: 20px;
      height: 40px;
      line-height: 40px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: bold;
    }

    .hint {
      display: -webkit-box;
      display: -moz-box;
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      margin-top: 15px;
      max-height: 45px;
    }

    .status-box {
      margin-left: -8px;

      .count-ran-time {
        display: inline-block;
        margin-left: 20px;
        font-size: 12px;
      }
    }

    .delete-btn {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 24px;
      height: 24px;
      font-size: 20px;
      cursor: pointer;
      color: #999;
    }
  }
}

.alick-btn-edit {
  margin-left: 8px;
  cursor: pointer;
}


.desc-container {
  position: relative;
  margin: .625rem 0;

  .text {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
  }

  .toggle-button {
    position: absolute;
    bottom: -1.875rem;
    right: .625rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-decoration: underline;
  }
}

.el-breadcrumb {
  .el-breadcrumb__item .el-breadcrumb__inner {
    color: #333;
    font-size: 1.125rem;
  }
}

.tabs-box {
  .el-tabs__nav-wrap {
    // background-color: transparent;
    // padding-bottom: 10px;

    &::after {
      //height: 0 !important;
      height: 1px !important;
      background: rgba(78, 87, 118, 1) !important;
    }

    .el-tabs__nav-scroll {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 10px;
      // border-bottom: 1px solid rgba(#808080, .2);

      .el-tabs__nav {
        border: 0 !important;

        * {
          border: 0 !important;
        }
      }

      .el-tabs__item {
        color: rgba(164, 173, 205, 1) !important;
        min-width: 8.125rem;
        font-size: 1.1875rem;
        line-height: 3.125rem;
        text-align: center;
        padding: 0;
      }

      .el-tabs__nav-scroll {
        padding: 0 15px;
      }

      //.el-tabs__nav-scroll {
      //  display: flex;
      //  flex-direction: column;
      //  align-items: center;
      //  justify-content: space-between;
      //  padding-bottom: 10px;
      //  // border-bottom: 1px solid rgba(#808080, .2);
      //
      //  .el-tabs__nav {
      //    border: 0 !important;
      //
      //    * {
      //      border: 0 !important;
      //    }
      //  }
      //
      //  .el-tabs__item {
      //    min-width: 8.125rem;
      //    font-size: 1.1875rem;
      //    line-height: 3.125rem;
      //    text-align: center;
      //    padding: 0;
      //  }

      .el-tabs__item {
        font-size: 16px;
      }

      .is-active {
        color: #0077FF;
        border: 0 !important;
        height: .3125rem;
        background-color: #0077FF;
        top: 0;
      }

      .el-tabs__active-bar {
        width: 8.125rem !important;
        height: .3125rem;
        background-color: #0077FF;
        top: 0;
      }
    }
  }

  .is-active {
    color: rgba(1, 154, 255, 1) !important;

  }

  //
  //  .el-tabs__active-bar {
  //    width: 8.125rem !important;
  //    height: .3125rem;
  //    background-color: #0077FF;
  //    top: 0;
  //  }
  //}
}

.tabs-two {
  .el-tabs__item {
    min-width: 6.25rem !important;
    font-size: 1rem !important;
  }

  .is-active {
    height: .1875rem;
  }

  .el-tabs__active-bar {
    height: 0 !important;
    width: 6.25rem !important;
  }
}

.el-textarea * {
  cursor: pointer !important;
  width: 100%;
}

.el-table {
  .has-gutter {
    th.is-leaf {
      padding: 0;
      line-height: 45px;
    }
  }

  .el-table__row {
    padding: 0;
    height: 45px;
    max-width: 240px;
  }

  .el-table__row * {
    white-space: pre-wrap;
    text-align: left;
    line-height: 1.5em;

    // .cell {
    //   display: flex;
    //   align-items: center;
    // }
  }

  .cell .desc,
  .cell .el-popover__reference {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.el-table__body-wrapper {
  td .el-button--text {
    margin: 0 5px;

    * {
      display: flex;
      align-items: center;
    }
  }
}

.menu {
  z-index: 9999;
}

.el-menu {
  z-index: 9999;
  // height: 100vh;

  .is-active {
    background: linear-gradient( 360deg, rgba(48,72,132,0) 0%, #56A2FE 90%) !important;

    * {
      color: #fff !important;
    }
  }
}

.el-checkbox {
  display: flex;
  align-items: center;
  margin-top: 8px;

  .el-checkbox__inner {
    margin-top: 0 !important;
  }
}

.el-breadcrumb__item {
  .el-breadcrumb__inner {
    font-size: 16px !important;
  }

  &:nth-child(1) .el-breadcrumb__inner {
    color: #A4ADCD !important;
    font-size: 14px !important;
  }

  .el-breadcrumb__separator {
    color: #A4ADCD !important;
  }
}

.commit-info {
  margin: 10px 0 20px;
}

.header-box {
  // padding: 6px 0 0 6px;
  width: 100%;
  box-sizing: border-box;
  // background-color: rgba(#fff, 1);
  background: #eee;
  height: 58px;
  padding: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .handle {
    float: left;
    // padding-top: 22px;
    margin-left: 5.625rem;

    .search {
      float: left;
      width: 22px;
      height: 22px;
      margin-right: 16px;
      background: url(~@/assets/img/search.png) no-repeat;
      background-size: 22px 22px;
    }

    .full {
      float: left;
      width: 22px;
      height: 22px;
      margin-right: 16px;
      background: url(~@/assets/img/full.png) no-repeat;
      background-size: 22px 22px;
    }
  }

  .user {
    float: right;
    margin-right: 1.25rem;
    font-size: 12px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    .text {
      display: flex;
      align-items: center;
      margin-right: 16px;
      color: #8492C2 !important;

      a {
        color: #8492C2;

        &:hover {
          color: #409EFF;
        }
      }
    }

    .user-box {
      cursor: pointer;
      padding-top: 5px;

      .avatar {
        width: 40px;
        height: 40px;
        border: 2px solid transparent;
        border-radius: 50%;
        background: url(~@/assets/img/user-avatar.svg) no-repeat;
        background-size: 100%;

        &:hover {
          border-color: rgba(#8492C2, .2);
        }
      }

      img {
        width: 40px;
        height: 40px;
        border: 2px solid transparent;
        border-radius: 50%;

        &:hover {
          border-color: rgba(#8492C2, .2);
        }
      }
    }
  }
}

.avatar {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: url(~@/assets/img/user-avatar.svg) no-repeat;
  background-size: 100%;
  float: left;
}

.drawer-box {
  background: #242730;
  box-shadow: 5px 0 10px rgba(#000, .1);

  .infinite-list {
    // background: #242730 !important;

    .utils {
      padding: 5px;
    }

    .infinite-item {
      border-bottom: 1px solid #333;
    }

    .infinite-item.is-active {
      background: #5A658E;

      .title {
        color: #333 !important;
      }

      .desc {
        color: #808080 !important;
      }
    }

    .title {
      color: #333 !important;
    }

    .desc {
      color: #808080 !important;
    }
  }
}


.el-checkbox__input {
  .el-checkbox__inner {
    width: 15px;
    height: 15px;
    background: transparent;
    border-width: 2px;
    margin-top: 10px;
  }
}


.el-drawer__wrapper {
  .el-drawer__body {
    overflow-y: auto;

    // 滚动条
    &::-webkit-scrollbar {
      width: 6px;
    }

    /* 滚动槽 */
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(#fff, 0.3);
      border-radius: 10px;
    }

    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(#fff, 0.1);
      box-shadow: inset 0 0 6px rgba(#fff, 0.5);
    }

    &::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(#fff, 0.06);
    }
  }
}